import React, {useState} from "react";
import { Row, Col, Form, Input, Button, Space, Select,Upload } from 'antd';
import { MinusCircleOutlined, PlusOutlined,UploadOutlined,DownloadOutlined } from '@ant-design/icons';
import { config } from "../../util/config";
import AddFormField from "./AddFormField";

const { Option } = Select;

export default function WorkManage(){

    let [formItems,setFormItems] = useState({formItems:[]})

    const onFinish = values => {
        console.log('Received values of form:', values);
        setFormItems(values)
    };
    const onFinish1 = values => {
        console.log('Received values of form:', values);
    };
    const normFile = (e) => {
        console.log('Upload event:', e);
        // alert(e)
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    const beforeUpload = async file => {
        debugger
        const suffix = file.name.slice(file.name.lastIndexOf('.'));
        const filename = Date.now() + suffix;
        // file.url = OSSData.dir + filename;

        return false;
    };

    return (
        <Row style={{marginTop:"1rem"}} gutter={32} >
            <Col span={10}>
                <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
                    <Form.List name="formItems">
                        {(fields, { add, remove }) => (
                            <>
                                {fields.map(({ key, name, fieldKey, ...restField }) => (
                                    <Space key={key} style={{ display: 'flex'}} align="baseline">
                                        <Form.Item
                                            {...restField}
                                            label="欄位類型"
                                            name={[name, 'first']}
                                            fieldKey={[fieldKey, 'first']}
                                            rules={[{ required: true }]}
                                        >
                                            <Select style={{ width: 90 }} >
                                                <Option value={config.radio_value}>{config.radio_name}</Option>
                                                <Option value={config.checkbox_value}>{config.checkbox_name}</Option>
                                                <Option value={config.transfer_value}>{config.transfer_name}</Option>
                                                <Option value={config.input_value}>{config.input_name}</Option>
                                                <Option value={config.editor_value}>{config.editor_name}</Option>
                                            </Select>
                                        </Form.Item>
                                        <Form.Item
                                            {...restField}
                                            label="欄位名稱"
                                            name={[name, 'second']}
                                            fieldKey={[fieldKey, 'second']}
                                            rules={[{ required: true }]}
                                        >
                                            <Input style={{ width: 150 }} placeholder="Last Name" />
                                        </Form.Item>
                                        <Form.Item
                                            {...restField}
                                            label="是否必選"
                                            name={[name, 'last']}
                                            fieldKey={[fieldKey, 'last']}
                                            rules={[{ required: true }]}
                                        >
                                            <Select style={{ width: 80 }} >
                                                <Option value={true}>必選</Option>
                                                <Option value={false}>可選</Option>
                                            </Select>
                                        </Form.Item>
                                        <MinusCircleOutlined onClick={() => remove(name)} />
                                    </Space>
                                ))}
                                <Form.Item>
                                    <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                        添加欄位
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            確定
                        </Button>
                    </Form.Item>
                </Form>
            </Col>
            <Col span={12}>
                {
                    formItems.formItems.length!=0
                        ?
                        <Form name="static_form_nest_item" onFinish={onFinish1} autoComplete="off">
                            {
                                formItems.formItems.map(item=>
                                    <Form.Item
                                        name={item.second}
                                        label={item.second}
                                        valuePropName="fileList"
                                        getValueFromEvent={item.first==config.transfer_value?normFile:null}
                                        // rules={[{ required: true }]}
                                    >
                                        {
                                            item.first!=config.input_value && item.first!=config.editor_value && item.first!=config.transfer_value
                                                ?
                                                <AddFormField></AddFormField>
                                                :
                                                item.first==config.input_value
                                                    ?
                                                    config.input_name
                                                    :
                                                    item.first==config.editor_value
                                                        ?
                                                        config.editor_name
                                                        :
                                                        item.first==config.transfer_value
                                                            ?
                                                            <Row>
                                                                <Col >
                                                                    <Upload
                                                                        beforeUpload={beforeUpload}
                                                                    >
                                                                        <Button type={"primary"} icon={<UploadOutlined />}>Excel 上传</Button>
                                                                    </Upload>
                                                                </Col>
                                                                <Col >
                                                                    &nbsp;&nbsp;
                                                                    <Button icon={<DownloadOutlined />}>Excel 模板下載</Button>
                                                                </Col>
                                                            </Row>
                                                            :
                                                            null
                                        }
                                    </Form.Item>
                                )
                            }
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    提交
                                </Button>
                            </Form.Item>
                        </Form>
                        :
                        null
                }
            </Col>
        </Row>

    );
};
